<template>
	<view v-if='screenWidth>480' class="flex-shrink">
		<!-- <view class="bg-light" style="width: 100%;height: 80rpx;">
			<view class="__inner flex justify-between align-center">
				<view class="flex justify-between" style="width: 300px;">
					<text class="font-sm text-muted">欢迎来到黑木耳产业互联网平台！</text>
					<text v-if="isLogin" class="font-sm text-orange text-ellipsis" style="width: 80px; cursor:pointer">{{Name}}({{Phone}})</text>
					<text v-if="isLogin" @click="handleExit" class="font-sm text-muted" style="cursor:pointer">退出</text>
					<text v-if="!isLogin" @click="Login" class="font-sm " :class="'text-'+ThemeColors" style="cursor:pointer">请登录</text>
					<text v-if="!isLogin" @click="Register" class="font-sm text-muted" style="cursor:pointer">免费注册</text>
				</view>
				<view class="flex justify-between" style="width: 130px;">
					<text @click="handleBackend" class="drop-down font-sm text-muted" style="cursor:pointer position: relative;">买家中心<i class="dropdown-arrow icon-triangle-down"></i></text>
					<text class="drop-down font-sm text-muted" style="cursor:pointer position: relative;">卖家中心<i class="dropdown-arrow icon-triangle-down"></i></text>
				</view>
			</view>
		</view>
		<view class="bg-white" style="width: 100%; height: 200rpx;">
			<view class="__inner flex justify-center" style="position: relative;">
				<view @click="handleIndex" class="px-4 flex align-center" style="cursor: pointer; height: 100%;position: absolute;left: 0;">
					<image src="@/static/icon/logo.png" style="height: 70%;" mode="heightFix"></image>
				</view>
		
				<view v-if="isTabs" class="flex" style="width: 40%; height: 45%; margin: auto;">
					<view class="pl-2 flex align-center border-button" :class="'border-'+ThemeColors" style="width: 80%;">
						<input type="text" placeholder="请输入内容" style="width: 100%;height: 80%;">
					</view>
					<view class="flex justify-center align-center border-button border-success" :class="'bg-'+ThemeColors+' border-'+ThemeColors"  style="width: 20%;">
						<text class="font-md font-weight-bold text-white" style="cursor:pointer">搜索</text>
					</view>
				</view>
			</view>
		</view> -->
		<view class="">
			<view class="__inner flex justify-between align-center py-2" style="height: 50%">
				<view class="flex align-center">
					<!-- <image @click="handleIndex" style="width: 240rpx; height: 90rpx" src="@/static/icon/logo2.jpg" mode=""></image> -->
					<image @click="handleIndex" style="width: 90rpx; height: 90rpx" src="@/static/icon/Icologo.png"
						mode=""></image>
					<text @click="handleIndex" :class="'mx-2 font-weight-bold font-big text-' + ThemeColors">众菌联</text>
					<text class="font-weight-bold font-big ml-4 mr-7">黑龙江长尾供应链服务有限公司</text>
					<view class="font-lg ml-4 mr-7">
						<text>服务热线:</text>
						<text class="font-md">18640249522</text>
					</view>
					<text>{{ NowDate }}</text>
				</view>
				<view style="width: 9%;cursor: pointer;" class="flex justify-between font-lg align-center">
					<view v-if="!isLogin" class="w-100 flex justify-between">
						<text @click="Login" class="hover">登录</text>
						<text @click="Register" class="hover">注册</text>
					</view>
					<view v-else>
						<text @click="handleExit" class="hovers">退出登录</text>
					</view>
				</view>
			</view>
		</view>

		<view v-if="isTabs" class="bg-white border-top border-bottom" style="width: 100%; height: 100rpx;">
			<view class="__inner flex ">
				<view @click="handleTabs(item.path)" :class="current==item.id?'bg-'+ThemeColors+' text-white':''"
					v-for="(item,index) in tabs" :key="index" class="flex justify-center align-center px-5 mx-1"
					style="height: 100%; cursor:pointer">
					<text class="font-md font-weight-bold">{{item.value}}</text>
				</view>
			</view>
		</view>
	</view>
	<!-- 移动端适配 -->
	<view v-else-if="screenWidth<=480" class="flex-shrink">
		<view class="bg-light" style="width: 100%;height: 50rpx;">
			<view class="flex justify-between" style="height: 100%;">
				<view class="flex align-center justify-between" style="width: 240rpx;">
					<text v-if="isLogin" class="font-sm text-orange text-ellipsis"
						style="width: 80px; cursor:pointer">黑龙江采购商(6120)</text>
					<text v-if="isLogin" @click="handleExit" class="font-sm text-muted" style="cursor:pointer">退出</text>
					<text v-if="!isLogin" @click="Login" class="ml-1 font-sm " :class="'text-'+ThemeColors"
						style="cursor:pointer">请登录</text>
					<text v-if="!isLogin" @click="Register" class="font-sm text-muted"
						style="cursor:pointer">免费注册</text>

				</view>
				<view class="flex align-center justify-between" style="width: 130px;">
					<text @click="handleBackend" class="drop-down font-sm text-muted"
						style="cursor:pointer position: relative;">买家中心</text>
					<text class="mr-1 drop-down font-sm text-muted"
						style="cursor:pointer position: relative;">卖家中心</text>
				</view>
			</view>
		</view>
		<view class="bg-white " style="width: 100%; height: 100rpx;">
			<view class="flex justify-center align-center" style="position: relative; height: 100%;">
				<view @click="handleIndex" class="flex-shrink flex align-center"
					style="cursor: pointer; height: 100%;width: 30%;">
					<image src="@/static/icon/logo.png" style="height: 70%;" mode="heightFix"></image>
				</view>
				<!-- 搜索框 -->
				<view class="flex justify-center align-center" style="width: 70%;height: 100%;">
					<view class="flex" style="height: 60%;">
						<view class="pl-2 flex align-center border-button" :class="'border-'+ThemeColors"
							style="width: 75%;">
							<input type="text" placeholder-class="font" placeholder="请输入内容"
								style="width: 100%;height: 80%;">
						</view>
						<view class="flex justify-center align-center border-button border-success"
							:class="'bg-'+ThemeColors+' border-'+ThemeColors" style="width: 25%;">
							<text class="font text-white" style="cursor:pointer">搜索</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white border-top border-bottom" style="width: 100%; height: 100rpx;">
			<view class="flex " style="width: 100%;height: 100%;">
				<view @click="handleTabs(item.path)" :class="current==item.id?'bg-'+ThemeColors+' text-white':''"
					v-for="(item,index) in tabs" :key="index" class="flex justify-center align-center"
					style="width: 20%; height: 100%; cursor:pointer">
					<text class="font-sm">{{item.value}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import times from "@/static/js/utils.js";
	const app = getApp();
	export default {
		name: "yHeader",
		props: {
			current: {
				type: Number,
				default: 1
			},
			screenWidth: {
				type: Number,
				default: 1200
			},
			isTabs: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				NowDate: "",
				Name: '',
				Phone: '',
				isLogin: false,
				ThemeColors: app.globalData.ThemeColors,
				tabs: [{ //导航栏
					id: 1,
					value: "首页",
					path: '/pages/index/index'
				}, {
					id: 2,
					value: "供应大厅",
					path: '/pages/index/supply'
				}, {
					id: 3,
					value: "采购大厅",
					path: '/pages/index/purchase'
				}, {
					id: 4,
					value: "用户专区",
					path: '/pages/index/enterprise'
				}, {
					id: 5,
					value: "资讯中心",
					path: '/pages/index/consult'
				}, {
					id: 6,
					value: "金融服务",
					path: '/pages/index/financial'
				}, {
					id: 7,
					value: "关于我们",
					path: '/pages/index/Aboutus'
				}],
			}
		},
		mounted() {
			this.NowDate = times.NowTime();
			if (uni.getStorageSync('loginInfo').token) { //本地存储地址
				this.isLogin = true
				this.Phone = uni.getStorageSync('loginInfo').use.slice(7, 11)
				this.Name = uni.getStorageSync('loginInfo').username
			} else {
				this.isLogin = false
			}
		},
		methods: {
			handleTabs(path) {
				// this.path = path
				this.$emit('Tabs', path)
			},
			handleIndex() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			handleExit() {
				uni.removeStorageSync('loginInfo');
				this.isLogin = false
				this.$emit('EditLogin')
			},
			Login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			Register() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			handleBackend() {
				uni.navigateTo({
					url: '/pages/backend/index'
				})
			},
			handleExit() { //退出
				uni.removeStorageSync('loginInfo');
				this.isLogin = false
				if (window.location.hash != '#/pages/index/index') {
					uni.navigateTo({
						url: '/pages/index/index'
					})
				}
				window.history.go(0)
			},
		}
	}
</script>

<style lang="scss">
	.icon-triangle-down {
		width: 0;
		height: 0;
		margin-left: 5px;
		border: 4px solid #535b62;
		border-right-color: transparent;
		border-left-color: transparent;
		border-bottom: none;
		/*兼容IE6及其以下*/
		_border-right-color: #fff;
		_border-right-color: #fff;
		position: absolute;
		top: 20px;
	}

	.drop-down:hover .icon-triangle-down {
		border-top: none;
		border-bottom-width: 4px;
		border-bottom-style: solid;
		// border-bottom-colors: var(--color);
	}

	.border-button {
		border-width: 5rpx;
		border-style: solid;
		box-sizing: border-box;
	}

	.hover:hover {
		text-decoration: underline;
		color: #28a745;
	}

	.hovers:hover {
		text-decoration: underline;
		color: #dc3545;
	}
</style>